<!--
 * @Author: cgl
 * @Date: 2023-04-18 15:12:26
 * @LastEditors: cgl
 * @LastEditTime: 2023-08-23 10:11:21
 * @FilePath: \public-health-emergencies-fed:\radiation-hygiene-fe\src\components\workFlow\index.vue
 * @Description: 流程弹框
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <el-dialog
    title="查看流程"
    :visible.sync="dialogVisibleFlow"
    :close-on-click-modal="false"
    width="1200px"
    class="flowdialog"
    v-dialogDrag="true"
  >
    <el-tabs tab-position="top" v-model="activeNameFlow">
      <el-tab-pane label="流转记录" name="record">
        <el-card class="box-card" shadow="never">
          <el-col :span="20" :offset="2">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in historyProcNodeList"
                  :key="index"
                  :icon="setIcon(item.endTime)"
                  :color="setColor(item.endTime)"
                >
                  <p style="font-weight: 700">{{ item.activityName }}</p>
                  <el-card
                    v-if="item.activityType === 'startEvent'"
                    class="box-card"
                    shadow="hover"
                  >
                    {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
                  </el-card>
                  <el-card
                    v-if="item.activityType === 'userTask'"
                    class="box-card"
                    shadow="hover"
                  >
                    <el-descriptions
                      class="margin-top"
                      :column="1"
                      size="small"
                      border
                      :labelStyle="{ 'font-weight': 'bold' }"
                    >
                      <el-descriptions-item
                        v-if="item.state"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-s-promotion"></i>审批状态</template
                        >
                        <dict-tag
                          :options="dict.type.flowable_check_type"
                          :value="item.state.value"
                        />
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.assigneeName"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-user"></i>实际办理</template
                        >
                        {{ item.assigneeName }}
                        <el-tag type="info" size="mini">{{
                          item.deptName
                        }}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.candidate"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-user"></i>候选办理</template
                        >
                        {{ item.candidate }}
                      </el-descriptions-item>
                      <el-descriptions-item label-class-name="my-label">
                        <template slot="label"
                          ><i class="el-icon-date"></i>接收时间</template
                        >
                        {{ item.createTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.endTime"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-date"></i>处理时间</template
                        >
                        {{ item.endTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.duration"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-time"></i>耗时</template
                        >
                        {{ item.duration }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.commentList && item.commentList.length > 0"
                        label-class-name="my-label"
                      >
                        <template slot="label"
                          ><i class="el-icon-tickets"></i>处理意见</template
                        >

                        <div
                          v-if="item.commentList && item.commentList.length > 0"
                        >
                          <div
                            v-for="(comment, index) in item.commentList"
                            :key="index"
                          >
                            <el-divider content-position="left">
                              <el-tag
                                :type="approveTypeTag(comment.type)"
                                size="mini"
                                >{{ commentType(comment.type) }}</el-tag
                              >
                              <el-tag type="info" effect="plain" size="mini">{{
                                comment.time
                              }}</el-tag>
                            </el-divider>
                            <span>{{ comment.fullMessage }}</span>
                          </div>
                        </div>
                      </el-descriptions-item>
                      <!-- <el-descriptions-item label="候选办理">{{ item.candidate || '-'}}</el-descriptions-item>
												<el-descriptions-item label="接收时间">{{ item.createTime || '-'}}</el-descriptions-item>
												<el-descriptions-item label="办结时间">{{ item.endTime || '-' }}</el-descriptions-item> -->
                      <!-- <el-descriptions-item label="耗时">{{ item.duration || '-'}}</el-descriptions-item> -->
                    </el-descriptions>
                  </el-card>
                  <el-card
                    v-if="item.activityType === 'endEvent'"
                    class="box-card"
                    shadow="hover"
                  >
                    {{ item.createTime }} 结束流程
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="流程跟踪" name="track">
        <el-card class="box-card" shadow="never">
          <process-viewer
            :key="`designer-${loadIndex}`"
            style="height: 590px"
            :xml="xmlData"
            :finishedInfo="finishedInfo"
            :allCommentList="historyProcNodeList"
          />
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer">
      <el-button @click="dialogVisibleFlow = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detailProcess } from "@/api/workflow/process";
import ProcessViewer from "@/components/ProcessViewer";
export default {
  name: "workFlow",
  components: { ProcessViewer },
  data() {
    return {
      // 模型xml数据
      loadIndex: 0,
      xmlData: undefined,
      taskFormOpen: false,
      taskFormData: {}, // 流程变量数据
      processFormList: [], // 流程变量数据
      formOpen: false, // 是否加载流程变量数据
      historyProcNodeList: null,
      finishedInfo: {
        finishedSequenceFlowSet: [],
        finishedTaskSet: [],
        unfinishedTaskSet: [],
        rejectedTaskSet: [],
      },
      dialogVisibleFlow: false,
      activeNameFlow: null,
      isPer: false,
      isHide: false,
    };
  },
  computed: {
    commentType() {
      return (val) => {
        switch (val) {
          case "1":
            return "通过";
          case "2":
            return "退回";
          case "3":
            return "驳回";
          case "4":
            return "委派";
          case "5":
            return "转办";
          case "6":
            return "终止";
          case "7":
            return "撤回";
        }
      };
    },
    approveTypeTag() {
      return (val) => {
        switch (val) {
          case "1":
            return "success";
          case "2":
            return "warning";
          case "3":
            return "danger";
          case "4":
            return "primary";
          case "5":
            return "success";
          case "6":
            return "danger";
          case "7":
            return "info";
        }
      };
    },
  },
  created() {},
  methods: {
    // 查看流程
    openDialog(row) {
      if (!row.processId) {
        this.$modal.msgWarning("暂无流程信息");
        return;
      }
      const params = { procInsId: row.processId };
      this.dialogVisibleFlow = true;
      this.activeNameFlow = "record";
      this.xmlData = undefined;
      this.loadIndex = row.processId;
      detailProcess(params).then((res) => {
        const data = res.data;
        this.xmlData = data.bpmnXml;
        this.processFormList = data.processFormList;
        this.taskFormOpen = data.existTaskForm;
        if (this.taskFormOpen) {
          this.taskFormData = data.taskFormData;
        }
        this.historyProcNodeList = data.historyProcNodeList;
        this.finishedInfo = data.flowViewer;
        this.formOpen = true;
      });
    },
    setIcon(val) {
      if (val) {
        return "el-icon-check";
      } else {
        return "el-icon-time";
      }
    },
    setColor(val) {
      if (val) {
        return "#2bc418";
      } else {
        return "#b3bdbb";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.flowdialog .el-tabs {
  height: 700px;
  overflow: auto;
}
</style>
